<template>
  <section class="cms-page">
    <h2 class="cms-title">首页配置</h2>
    <el-button
      @click="editServiceCategory({})"
      type="primary">新增服务类别
    </el-button>
    <el-table
      :data="list"
      v-loading="loading"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table
            :data="scope.row.services"
            style="width: 100%">
            <el-table-column
              label="ID"
              prop="id">
            </el-table-column>
            <el-table-column
              label="服务类型"
              prop="name">
            </el-table-column>
            <el-table-column
              label="价格"
              prop="price">
            </el-table-column>
            <el-table-column
              label="logo"
            >
              <template slot-scope="scope_inner">
                <div class="table-avatar">
                  <ratio-img
                    :ratio="1"
                    :src="scope_inner.row.logo"></ratio-img>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="描述"
              :show-overflow-tooltip="true"
              prop="des">
            </el-table-column>
            <el-table-column
              label="操作"
            >
              <template slot-scope="scope_inner">
                <el-button
                  @click="editServiceItem(scope.row, scope_inner.row)"
                  :loading="scope_inner.row.loading"
                  type="text">编辑
                </el-button>
                <el-button
                  @click="deleteServiceItem(scope_inner.row)"
                  :loading="scope_inner.row.loading"
                  type="text">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        label="ID"
        prop="id">
      </el-table-column>
      <el-table-column
        label="服务类型"
        prop="name">
      </el-table-column>
      <el-table-column
        label="描述"
        :show-overflow-tooltip="true"
        prop="des">
      </el-table-column>
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            @click="editServiceItem(scope.row, {})"
            :loading="scope.row.loading"
            type="text">新增服务
          </el-button>
          <el-button
            @click="editServiceCategory(scope.row)"
            :loading="scope.row.loading"
            type="text">编辑
          </el-button>
          <el-button
            @click="deleteCategoryItem(scope.row)"
            :loading="scope.row.loading"
            type="text">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div
      v-if="show_pagination"
      class="cms-pagination">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="size"
        :current-page.sync="page"
      >
      </el-pagination>
    </div>
  </section>
</template>

<script>
  /**
   * @Author: lifuzhao
   * @Date: 2019-05-15
   * @Project: eabax
   */
  import ratioImg from '@/components/ratio-img'

  const types = [{
    label: '轮播服务类型',
    value: 1
  }, {
    label: ''
  }]
  export default {
    name: 'index',
    layout: 'cms',
    data() {
      return {
        types: [],
        list: [],
        page: 1,
        size: 10,
        total: 0,
        loading: false
      }
    },
    computed: {
      show_pagination() {
        return this.list.length > 0
      }
    },
    watch: {
      form: {
        deep: true,
        handler() {
          this.getList()
        }
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      getList() {
        this.loading = true
        return this.$axios.$get('/api/v1/categories', {
          params: {
            page: this.page,
            size: this.size
          }
        })
          .then(response => {
            this.loading = false
            this.total = response.length
            this.list = response
          })
          .catch(response => {
            this.loading = false
            this.$message({
              message: '获取列表失败',
              type: 'error'
            })
          })

      },
      editServiceCategory(query = {}) {
        this.$router.push({
          path: '/cms/home/edit',
          query: {
            id: query.id,
            name: query.name,
            des: query.des
          }
        })
      },
      editServiceItem(category, service){
        let cId = category.id
        this.$router.push({
          path: '/cms/home/edit-service',
          query: {
            cId: cId,
            sId: service.id,
            logo: service.logo,
            name: service.name,
            des: service.des,
            price: service.price
          }
        })
      },
      deleteCategoryItem(row) {
        this.$confirm(`确认删除服务类别 ${row.name} ？`, {
          type: 'warning'
        })
          .then(() => {
            this.$set(row, 'loading', true)
            this.$axios
              .$post('/api/v1/category/handel', {
                id: row.id
              })
              .then(res => {
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                this.getList()
              })
              .catch(res => {
                this.$set(row, 'loading', false)
                this.$message({
                  message: '操作失败',
                  type: 'error'
                })
              })
          })
      },
      deleteServiceItem(row) {
        this.$confirm(`确认删除服务 ${row.name} ？`, {
          type: 'warning'
        })
          .then(() => {
            this.$set(row, 'loading', true)
            this.$axios
              .$post('/api/v1/service/handel', {
                id: row.id
              })
              .then(res => {
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                this.getList()
              })
              .catch(res => {
                this.$set(row, 'loading', false)
                this.$message({
                  message: '操作失败',
                  type: 'error'
                })
              })
          })
      }
    },
    components: {
      ratioImg
    }
  }
</script>
